<!doctype html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Emscripten-Generated Code</title>
        <style>
            .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
            .app {
                position: absolute;
                top: 0px; left: 0px; margin: 0px; border: 0; width: 100%; height: 100%;
                overflow: hidden;
                display: block;
            }
            textarea.emscripten { font-family: monospace; width: 80%; }
            div.emscripten { text-align: center; }
            div.emscripten_border { border: 1px solid black; }
            /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
            canvas.emscripten { border: 0px none; background-color: black; }
            .spinner {
                height: 50px; width: 50px; margin: 0px auto;
                animation: rotation 0.8s linear infinite;
                border: 10px solid rgb(0,150,240);
                border-top: 10px solid rgb(100,0,200);
                border-radius: 100%;
                background-color: rgb(200,100,250);
            }
            @keyframes rotation {
                from {transform: rotate(0deg);}
                to {transform: rotate(360deg);}
            }
        </style>
    </head>
    <body>
        <hr/>
        <div class="emscripten_border">
            <canvas class="emscripten app" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
            <div class="emscripten" id="status">Downloading...</div>
            <figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure>
            <div class="emscripten">
                <progress value="0" max="100" id="progress" hidden=1></progress>    
            </div>
        </div>
        <hr/>
        <script src="staticmodule.js"></script>
        {{{ SCRIPT }}}
        <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '${name}.wasm', true)
        xhr.responseType = 'arraybuffer';
        xhr.onload = function() {
          Module.wasmBinary = xhr.response;
          var script = document.createElement('script');
          script.src = "${name}.js";
          document.body.appendChild(script);
        };
        xhr.send(null);
        </script>
    </body>
</html>
